<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: #f00;
        }
    </style>
</head>
<body>
    <div class="box" ></div>
    <div style=" margin-top:20px; width:100px; height:100px; background-color:#f00;" class="box2" ></div>
    
    <script>
        var box = document.getElementsByClassName('box')[0];
        box.onclick = function(){
            console.log(getStyle(box,'width'))
            console.log(this.style.background) //空的
            this.style.background = 'green'  //加入的是行内样式
            console.log(this.style.background) 
        }
        var box2 = document.getElementsByClassName('box2')[0];
        box2.onclick = function(){
            console.log(getStyle(box2,'width'))
            console.log(this.style.width)
            console.log(this.style.backgroundColor) //行内样式故有
            this.style.background = 'green' 
        }

        function getStyle(obj,style){
            if(obj.currentStyle){
                return obj.currentStyle[style];  
            }else{
                return getComputedStyle(obj)[style];
            }
        }


    </script>
</body>
</html>